import React, { Component } from 'react';
import {Card, notification, Button} from 'antd';
import './ui.less';
class notifications extends Component {
    handleOpenNotification = () => {
        notification.open({
            message: 'Notification Title',
            description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        })
    }
    openNotificationWithIcon = (type, position)=> {
        if (position) {
            notification.config({
                placement: position
            })
        }
        notification[type]({
            message: '通知',
            description: '我正在学习React高级课程',
        })
    }
    render() {
        return (
            <div>
                <Card title="notification基本用法">
                    <Button type="primary" onClick={this.handleOpenNotification}>open the notification</Button>
                </Card>
                <Card title="notification自定义带图标">
                    <Button  onClick={() => this.openNotificationWithIcon('success', 'topLeft')}>success</Button>
                    <Button  onClick={() => this.openNotificationWithIcon('info', 'topRight')}>info</Button>
                    <Button  onClick={() => this.openNotificationWithIcon('warning', 'bottomLeft')}>warning</Button>
                    <Button  onClick={() => this.openNotificationWithIcon('error', 'bottomRight')}>error</Button>
                </Card>
            </div>
        );
    }
}

export default notifications;